<template>
  <div class="nav">
      <div v-for="nav in navlist" :key='nav.path' :class="nav.path===route.fullPath?'nav-item active':'nav-item'"
      @click="goto(nav.path)">{{nav.name}}</div>
    </div>
  <router-view/>
</template>
<script lang="ts">
import { defineComponent ,ref,watch} from 'vue';
import {navList} from '@/pinia/index'
import {useRouter, useRoute} from 'vue-router'
export default defineComponent({
  name: 'HelloWorld',
  setup(){
      
    
    let router=useRouter()
    let route=useRoute()

    let routerPath=router.options.routes
    let navlist=ref<navList[]>([])
    for(let item of routerPath){
        if(item.path!=='/'){
           navlist.value.push({
               path:item.path,
               name:item.name as string
           })
        }
        
    }

    watch(()=>route.path,()=>{
      //监听路由变化
      // console.log(55555555)
    })

    function goto(path:string){
      router.push(path)
    }

    return {navlist,goto,route}
  }
});
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.nav {
  display: flex;
  padding: 10px 30px;
  .nav-item {
    flex: 1;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin-left: 20px;
    border: 1px solid #56234d;
    font-weight: bold;
    color: #2c3e50;
  }
  .active {
      color: #42b983;
    }
}
</style>
